<template>
  <div v-if="useuserStore.userInfo.userName === 'zh'" class="app-container">
    <n-card :bordered="false" :content-style="{ padding: '12px' }">
      <div class="form">
        <n-form ref="formRef" inline :label-width="80" :model="formValue">
          <n-form-item label="年级(一年级---高三)" path="user.level">
            <n-select
              v-model:value="formValue.content.level"
              :options="generalOptions"
              placeholder=""
            />
          </n-form-item>
          <n-form-item label="学科(语数英)" path="user.subjectId">
            <n-select
              v-model:value="formValue.content.subjectId"
              :options="subjectOptions"
              placeholder=""
            />
          </n-form-item>
          <n-form-item>
            <n-button @click="handleValidateClick">查询</n-button>
          </n-form-item>
          <n-form-item>
            <n-upload
              ref="upload"
              accept=".xls,.xlsx"
              action="http://localhost:8080/tInfoTextContent/import"
              :default-upload="false"
              :max="1"
              :default-file-list="fileList"
              :with-credentials="true"
              @change="handleChange"
            >
              <n-button>选择文件</n-button>
            </n-upload>
          </n-form-item>
          <n-form-item>
            <n-button :disabled="!fileListLength" style="margin-bottom: 12px" @click="handleClick">
              上传文件
            </n-button>
          </n-form-item>
        </n-form>
      </div>
      <div class="table">
        <NDataTable
          :columns="columns"
          :data="tableData"
          :single-line="false"
          :pagination="pagination"
        ></NDataTable>
      </div>
    </n-card>
  </div>
  <span v-else class="h-[200px] w-full flex justify-center mt-20 text-2xl font-bold"
    >非管理员，无权查看</span
  >
</template>
<script setup lang="ts">
  import { ref, h, onMounted, reactive } from 'vue'
  import type { DataTableProps } from 'naive-ui/lib/data-table'
  import {
    NDataTable,
    NTag,
    NForm,
    NFormItem,
    NInput,
    NAvatar,
    NButton,
    useMessage,
    NSelect,
    NUpload,
    NModal,
    UploadFileInfo,
    UploadInst
  } from 'naive-ui'
  import store from '../../store/tInfoTextContentStore/index'
  import userStore from '../../store/userStore/index'

  const formRef: any = ref(null)
  const message = useMessage()
  const formValue = ref({
    content: {
      subjectId: 1,
      level: 1
    }
  })
  const contentStore = store()
  const useuserStore = userStore()
  let tableData = ref()
  const fileListLengthRef = ref(0)
  const uploadRef = ref<UploadInst | null>(null)
  const fileListRef = ref<UploadFileInfo[]>([])
  const upload = uploadRef
  const fileListLength = fileListLengthRef
  const fileList = fileListRef
  const handleValidateClick = () => {
    contentStore
      .getContentList(formValue.value.content.subjectId, formValue.value.content.level)
      .then(({ data }) => {
        tableData.value = data
      })
  }
  const handleChange = (options: { fileList: UploadFileInfo[] }) => {
    fileListLengthRef.value = options.fileList.length
    fileListRef.value = options.fileList
  }
  const handleClick = () => {
    uploadRef.value?.submit()
  }

  const pagination = reactive({
    page: 1,
    pageCount: 1,
    itemCount: 1,
    pageSize: 10
  })

  onMounted(() => {
    pagination.pageCount = 100
    pagination.itemCount = 100
  })

  const columns: DataTableProps['columns'] = [
    { key: 'id', title: 'id', align: 'center' },
    { key: 'subjectId', title: '学科ID', align: 'center' },
    { key: 'topic', title: '题目', align: 'center' },
    { key: 'answer', title: '答案', align: 'center' },
    { key: 'parse', title: '解析', align: 'center' },
    { key: 'createUser', title: '创建人', align: 'center' },
    { key: 'createTime', title: '创建日期', align: 'center' }
  ]
  const generalOptions = [
    {
      label: '一年级',
      value: 1
    },
    {
      label: '二年级',
      value: 2
    },
    {
      label: '三年级',
      value: 3
    },
    {
      label: '四年级',
      value: 4
    },
    {
      label: '五年级',
      value: 5
    },
    {
      label: '六年级',
      value: 6
    },
    {
      label: '初一',
      value: 7
    },
    {
      label: '初二',
      value: 8
    },
    {
      label: '初三',
      value: 9
    },
    {
      label: '高一',
      value: 10
    },
    {
      label: '高二',
      value: 11
    },
    {
      label: '高三',
      value: 12
    }
  ]
  const subjectOptions = [
    {
      label: '语文',
      value: 1
    },
    {
      label: '数学',
      value: 2
    },
    {
      label: '英语',
      value: 3
    }
  ]
</script>
<style lang="scss" scoped>
  .box {
    color: #60d659;
  }
</style>
